// 虚拟dom 创建函数
import Element from './Element';

export function createElement(type, props, children) {
  return new Element(type, props, children);
}

export function setAttrs(node, prop, value) { // 设置节点的属性
  switch (prop) {
    case 'value': // 区分是否是表单节点
      if (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA') {
        node.value = value;
      } else {
        node.setAttribute(prop, value);
      }
      break;
    case 'style':
      node.style.cssText = value;
      break;
    default:
      node.setAttribute(prop, value);
      break;
  }
}

export function render(vDom) { // 虚拟Dom 转 真实Dom
  const { type, props, children } = vDom,
        el = document.createElement(type);
  
  for (let key in props) { // 设置元素的属性
    setAttrs(el, key, props[key]);
  }

  children.map(c => { // 如果有children就判断是否是文本节点，不是就递归渲染
    c = c instanceof Element ?
        render(c)
        :
        document.createTextNode(c);
    // console.log(c);
    el.appendChild(c);
  })

  return el;
}

export function renderDom(rDom, rootEl) { // 渲染真实Dom
  rootEl.appendChild(rDom);
}
